<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>KML Example: Loading ExtendedData</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"
      type="text/javascript"></script>
    <script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
    <script src="../timemap.js" type="text/javascript"></script>
    <script src="../param.js" type="text/javascript"></script>
    <script src="../loaders/xml.js" type="text/javascript"></script>
    <script src="../loaders/kml.js" type="text/javascript"></script>
	<script type="text/javascript">

var tm;
function onLoad() {
    tm = TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required) 
        options: {
            eventIconPath: "../images/"
        },
        datasets: [
            {
                title: "Six largest impact structures",
                theme: "green",
                type: "kml", 
                options: {
                    url: "impacts.kml", // KML file to load
                    // array of ExtendedData elements to look for
                    extendedData: ["Country", "Diameter", "Age", "Url", "theme"],
                    tagMap: {
                        "Url":"wiki_link"
                    },
                    // template for loaded data
                    infoTemplate: '<strong><a href="{{wiki_link}}" target="_blank">{{title}}, ' +
                                  '{{Country}}</a></strong><br><br>' +
                                  '<strong>Age:</strong> {{Age}}<br>' +
                                  '<strong>Diameter:</strong> {{Diameter}}<br>'
                }
            }
        ],
        bandInfo: [
            {
               width:          "85%", 
               intervalUnit:   Timeline.DateTime.DAY, 
		       intervalPixels: 100
            },
            {
               width:          "15%", 
               intervalUnit:   Timeline.DateTime.WEEK, 
		       intervalPixels: 150,
               showEventText:  false,
               trackHeight:    0.2,
               trackGap:       0.2
            }
        ]
    });
}
    </script>
	<link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 200px; }
    div#mapcontainer{ height: 400px; }
    </style>
  </head>

  <body onload="onLoad();" onunload="GUnload();">
    <div id="help">
    <h1>KML Example: Loading ExtendedData</h1>
    In this example, we're loading a KML file of meteorite impact structures with ExtendedData elements and using a custom template for the info window to display the loaded data. We're also using ExtendedData to load different themes for each item. <a href="http://code.google.com/apis/kml/documentation/extendeddata.html">Learn more about ExtendedData here.</a> (Okay, so the dates here are a little arbitrary - sometime soon I'll figure out a good way to display dates in the negative millions of years...)
    </div>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
          <div id="map"></div>
        </div>
    </div>
  </body>
</html>
